{include file="public/header" /}
<script type="text/javascript" src="__STATIC__/admin/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="__STATIC__/admin/lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="__STATIC__/admin/h-ui/js/H-ui.min.js"></script>
<script>
	//模块配置项
	var hdjs = {
		//框架目录
		'base': '__STATIC__/admin/node/hdjs',
		//上传文件后台地址
		'uploader': "{:url('admin/component/uploader')}",
		//获取文件列表的后台地址
//		'filesLists': "{:url('admin/component/filesLists')}",
	};
</script>
<script src="__STATIC__/admin/node/hdjs/app/util.js"></script>
<script src="__STATIC__/admin/node/hdjs/require.js"></script>
<script src="__STATIC__/admin/node/hdjs/config.js"></script>
<title>新增图片</title>
<link href="__STATIC__/admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 图片管理 <span class="c-gray en">&gt;</span> 添加图片 
	<a class=" btn btn-secondary radius" href="{:url('admin/picture/index')}" style="line-height:1.6em;margin-left:500px;margin-top:-3px;" data-title="分类管理">图片列表</a>
	<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
	<div class="page-container">
		<form class="form form-horizontal" id="form-article-add" method="post" action="{:url('admin/picture/add')}">
			<!--<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>图片标题：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" id="" name="">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">简略标题：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" id="" name="">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>分类栏目：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<span class="select-box">
				<select name="" class="select">
					<option value="0">全部栏目</option>
					<option value="1">新闻资讯</option>
					<option value="11">├行业动态</option>
					<option value="12">├行业资讯</option>
					<option value="13">├行业新闻</option>
				</select>
				</span>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">排序值：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="0" placeholder="" id="" name="">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">允许评论：</label>
				<div class="formControls col-xs-8 col-sm-9 skin-minimal">
					<div class="check-box">
						<input type="checkbox" id="checkbox-1">
						<label for="checkbox-1">&nbsp;</label>
					</div>
				</div>
			</div>-->

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">图片介绍：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" name="pname" class="input-text" value="" placeholder="" id="">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">图片排序：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" name="sort" class="input-text" value="" placeholder="数值越小越靠前" id="">
				</div>
			</div>

			<!--<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">图片来源：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="0" placeholder="" id="" name="">
				</div>
			</div>-->
			<!--<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">关键词：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="0" placeholder="" id="" name="">
				</div>
			</div>-->
			<!--<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">图片摘要：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<textarea name="" cols="" rows="" class="textarea" placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！" onKeyUp="$.Huitextarealength(this,200)"></textarea>
					<p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
				</div>
			</div>-->
			<!--<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">缩略图：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<div class="uploader-thum-container">
						<div id="fileList" class="uploader-list"></div>
						<div id="filePicker">选择图片</div>
						<button id="btn-star" class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>
					</div>
				</div>
			</div>-->
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">图片上传：</label>
				<div class="formControls col-xs-8 col-sm-9">

					<div class="input-group">
						<input type="text" class="form-control" name="pics" readonly="" value="">
						<div class="input-group-btn">
							<button onclick="upImage(this)" class="btn btn-default" type="button">选择图片</button>
						</div>
					</div>
					<div class="input-group" style="position:relative;margin-top:5px;">
						<img src="__STATIC__/admin/images/nopic.jpg" class="img-responsive img-thumbnail" width="150">
						<em class="close" style="position:absolute; top: -5px; right: 425px;" title="删除这张图片" onclick="removeImg(this)">×</em>
					</div>
				</div>
				<script>
					//上传图片
					function upImage(obj) {
						require(['util'], function(util) {
							options = {
								multiple: false, //是否允许多图上传
								//data是向后台服务器提交的POST数据
								data: {
									name: '后盾人',
									year: 2099
								},
							};
							util.image(function(images) { //上传成功的图片，数组类型
                               $.ajax({
								type: "GET",
								url: "{:url('Admin/Component/del')}",
								data: {
									path: $("[name='pics']").val()
								},
								dataType: "html",
								success: function(data) {

								}
							});
								$("[name='pics']").val(images[0]);
								$(".img-thumbnail").attr('src', images[0]);
							}, options)
						});
					}

					//移除图片
					function removeImg(obj) {
						$(obj).prev('img').attr('src', '__STATIC__/admin/images/nopic.jpg');
						$(obj).parent().prev().find('input').val('');
					}
				</script>
				<!--<div class="uploader-list-container">
						<div class="queueList">
							<div id="dndArea" class="placeholder">
								<div id="filePicker-2"></div>
								<p>或将照片拖到这里，单次最多可选300张</p>
							</div>
						</div>
						<div class="statusBar" style="display:none;">
							<div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>
							<div class="info"></div>
							<div class="btns">
								<div id="filePicker2"></div>
								<div class="uploadBtn">开始上传</div>
							</div>
						</div>
					</div>-->
				<!--<button onclick="upImages(this)" class="btn btn-default" type="button">选择图片</button>
					<div id="box"></div>
					<script>
						//上传图片
						function upImages(obj) {
							require(['util'], function(util) {
								options = {
									//上传多图
									multiple: true,
								};
								util.image(function(images) {

									$(images).each(function(k, v) {
										$("<img src='" + v + "'/>").appendTo('#box');
									})
								}, options)
							});
						}
					</script>-->
			</div>
	</div>
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
			<button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
			<!--<button  class="btn btn-secondary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存草稿</button>-->
			<button class="btn btn-default radius" type="reset">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
		</div>
	</div>
	</form>
	</div>

	<!--<script type="text/javascript" src="__STATIC__/admin/lib/jquery/1.9.1/jquery.min.js"></script>-->
	<!--<script type="text/javascript" src="__STATIC__/admin/lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="__STATIC__/admin/h-ui/js/H-ui.min.js"></script>-->

	<!--请在下方写此页面业务相关的脚本-->
	<!--<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script> -->
	<!--<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>-->
	<!--<script type="text/javascript" src="__STATIC__/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>-->
	<!--<script type="text/javascript">
		function article_save() {
			alert("刷新父级的时候会自动关闭弹层。")
			window.parent.location.reload();
		}

		$(function() {
			$('.skin-minimal input').iCheck({
				checkboxClass: 'icheckbox-blue',
				radioClass: 'iradio-blue',
				increaseArea: '20%'
			});

			$list = $("#fileList"),
				$btn = $("#btn-star"),
				state = "pending",
				uploader;

			var uploader = WebUploader.create({
				auto: true,
				swf: "__STATIC__/admin/lib/webuploader/0.1.5/Uploader.swf",

				// 文件接收服务端。
				server: "__STATIC__/admin/lib/webuploader/0.1.5/server/fileupload.php",

				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				pick: '#filePicker',

				// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
				resize: false,
				// 只允许选择图片文件。
				accept: {
					title: 'Images',
					extensions: 'gif,jpg,jpeg,bmp,png',
					mimeTypes: 'image/*'
				}
			});
			uploader.on('fileQueued', function(file) {
				var $li = $(
						'<div id="' + file.id + '" class="item">' +
						'<div class="pic-box"><img></div>' +
						'<div class="info">' + file.name + '</div>' +
						'<p class="state">等待上传...</p>' +
						'</div>'
					),
				$img = $li.find('img');
				$list.append($li);

				// 创建缩略图
				// 如果为非图片文件，可以不用调用此方法。
				// thumbnailWidth x thumbnailHeight 为 100 x 100
				uploader.makeThumb(file, function(error, src) {
					if(error) {
						$img.replaceWith('<span>不能预览</span>');
						return;
					}

					$img.attr('src', src);
				}, thumbnailWidth, thumbnailHeight);
			});
			// 文件上传过程中创建进度条实时显示。
			uploader.on('uploadProgress', function(file, percentage) {
				var $li = $('#' + file.id),
					$percent = $li.find('.progress-box .sr-only');

				// 避免重复创建
				if(!$percent.length) {
					$percent = $('<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>').appendTo($li).find('.sr-only');
				}
				$li.find(".state").text("上传中");
				$percent.css('width', percentage * 100 + '%');
			});

			// 文件上传成功，给item添加成功class, 用样式标记上传成功。
			uploader.on('uploadSuccess', function(file) {
				$('#' + file.id).addClass('upload-state-success').find(".state").text("已上传");
			});

			// 文件上传失败，显示上传出错。
			uploader.on('uploadError', function(file) {
				$('#' + file.id).addClass('upload-state-error').find(".state").text("上传出错");
			});

			// 完成上传完了，成功或者失败，先删除进度条。
			uploader.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress-box').fadeOut();
			});
			uploader.on('all', function(type) {
				if(type === 'startUpload') {
					state = 'uploading';
				} else if(type === 'stopUpload') {
					state = 'paused';
				} else if(type === 'uploadFinished') {
					state = 'done';
				}

				if(state === 'uploading') {
					$btn.text('暂停上传');
				} else {
					$btn.text('开始上传');
				}
			});

			$btn.on('click', function() {
				if(state === 'uploading') {
					uploader.stop();
				} else {
					uploader.upload();
				}
			});

		});

		(function($) {
			// 当domReady的时候开始初始化
			$(function() {
				var $wrap = $('.uploader-list-container'),

					// 图片容器
					$queue = $('<ul class="filelist"></ul>')
					.appendTo($wrap.find('.queueList')),

					// 状态栏，包括进度和控制按钮
					$statusBar = $wrap.find('.statusBar'),

					// 文件总体选择信息。
					$info = $statusBar.find('.info'),

					// 上传按钮
					$upload = $wrap.find('.uploadBtn'),

					// 没选择文件之前的内容。
					$placeHolder = $wrap.find('.placeholder'),

					$progress = $statusBar.find('.progress').hide(),

					// 添加的文件数量
					fileCount = 0,

					// 添加的文件总大小
					fileSize = 0,

					// 优化retina, 在retina下这个值是2
					ratio = window.devicePixelRatio || 1,

					// 缩略图大小
					thumbnailWidth = 110 * ratio,
					thumbnailHeight = 110 * ratio,

					// 可能有pedding, ready, uploading, confirm, done.
					state = 'pedding',

					// 所有文件的进度信息，key为file id
					percentages = {},
					// 判断浏览器是否支持图片的base64
					isSupportBase64 = (function() {
						var data = new Image();
						var support = true;
						data.onload = data.onerror = function() {
							if(this.width != 1 || this.height != 1) {
								support = false;
							}
						}
						data.src = "";
						return support;
					})(),

					// 检测是否已经安装flash，检测flash的版本
					flashVersion = (function() {
						var version;

						try {
							version = navigator.plugins['Shockwave Flash'];
							version = version.description;
						} catch(ex) {
							try {
								version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
									.GetVariab